<template>
  <div class="hospitalStockManager">
    <el-form ref="stockManagerForm" :model="stockManagerForm" :rules="rules" style="margin-top: 0" class="stockManager">
      <el-form-item prop="phone">
        <el-col :span="18">
          <el-input v-model="stockManagerForm.phone" placeholder="输入手机号码" />
        </el-col>
        <el-col :span="4">
          <el-link type="danger" :underline="false" @click="delStockManager">删除</el-link>
        </el-col>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import validate from '@/utils/formValidate'

export default {
  name: 'HospitalStockManager',
  props: {
    phone: {
      type: String,
      required: true
    },
    index: {
      type: Number,
      required: true
    }
  },
  data() {
    return {
      stockManagerForm: {
        phone: null
      },
      rules: {
        phone: [
          {
            required: true,
            message: '库存管理员联系方式不能为空',
            trigger: 'blur'
          },
          {
            message: '请输入正确的十一位手机号',
            trigger: ['blur', 'change'],
            max: 11,
            min: 11,
            validator: validate.validatePhone
          }
        ]
      }
    }
  },
  watch: {
    phone: {
      handler(newValue, oldValue) {
        if (this.phone) {
          this.stockManagerForm.phone = this.phone
        }
      }
    }
  },
  methods: {
    getData() {
      /* this.$refs.stockManagerForm.validate(v => {
        if (v) {
          return this.stockManagerForm.phone
        }
      })*/
      if (this.stockManagerForm.phone) {
        return this.stockManagerForm.phone
      } else {
        this.$message.error('库存管理员联系方式不能为空')
        return
      }
    },
    delStockManager(index) {
      this.$emit('delStockManager', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.stockManager {
  margin-bottom:20px;
  ::v-deep.el-form-item__error{
    margin-left: 0 !important;
  }
}
</style>
